<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 在vue2里，如果给对象数据动态添加属性，那么不会触发界面重新渲染 -->
      <!-- 原因：vue2用的数据响应式原理是 Object.defineProperty  -->
      <!-- 这个东西有缺陷，侦听不到动态添加的属性 -->
      <!-- 后面vue3出来的时候js语法升级了，出来了一个新的东西叫Proxy -->
      <!-- 就不存在这个问题了，因为动态添加的属性也能侦听到了 -->
      <button @click="obj.height = 175">动态给对象加属性</button>
      <!-- vue2里就是想动态添加属性，而且还能触发界面更新 -->
      <!-- 用$set来解决，语法： $set(对象, '属性名', '属性值') -->
      <!-- vue3里把$set删掉了 -->
      <button @click="$set(obj, 'height', 175)">$set 动态给对象加属性</button>
      <p>{{ obj }}</p>

      <h2>以下研究数组</h2>
      <!-- 在vue2里因为上面的同样的原因导致通过下标直接改数组，无法触发界面更新 -->
      <button @click="list[0] = 99">通过下标直接修改下标0</button>
      <!-- 解决办法用 $set -->
      <button @click="$set(list, 0, 99)">通过$set修改下标0</button>

      <!-- 这里能触发界面的原因是：你根本就没有改数组的下标0 -->
      <!-- 你改的只是下标0指向的对象里面的属性，而且这个属性不是动态添加的，所以能触发界面更新 -->
      <button @click="list2[0].name = '杰克'">
        通过下标直接修改list2的下标0
      </button>
      <p>{{ list }}</p>
      <p>{{list2}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data () {
          return {
            obj: {
              name: 'jack',
              age: 16
            },

            list: [10, 20, 30],

            list2: [
              { name: 'jack', age: 16 },
              { name: 'rose', age: 15 }
            ]
          }
        },
        methods: {}
      })
    </script>
  </body>
</html>
